<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <title>月度复购sku看板</title>
    <link rel="stylesheet" href="../../Home/common.css">
    <link rel="stylesheet" href="../../Home/reset.css">
    <link rel="stylesheet" href="../../library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" href="yearSku.css">
    <script src="../../library/jquery/jquery-1.11.3.js"></script>
    <script src="../../library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="wrap" data-role="page" id="pageone">

    <div data-role="header" data-theme="a" data-position="fixed" class="header">
        <a href="../manageBoard/" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-transition="slide" data-direction="reverse"><</a>
        <h2 style="font-size:16px;">复购SKU看板</h2>
        <a  style="padding-right:14px;" href="#pagetwo" target="_self" data-rel="popup" class="ui-btn ui-btn-b ui-icon-bars ui-btn-icon-notext">切换面板</a>
    </div>
    <div class="week">
    </div>
    <div class="main">
        <img src="../../Home/Images/loding.gif" alt="" class="loding">
        <div class='table'>
            <div class='left'>
                <div class="left_h"></div>
                <div class="left_li"></div>
            </div>
            <div class="right">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--条件筛选页面-->
<div data-role="page" id="pagetwo" data-display="overlay" data-position="right">
    <div data-role="header" data-theme="a" data-position="fixed" class="header">
        <a href="#pageone" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
        <h2>条件筛选</h2>
        <a href="#pageone" target="_self" class="ui-btn ui-btn-b" id="selectSub" data-rel="close" data-transition="slide" data-direction="reverse" @click="getSelect()">查询</a>
    </div>
    <div data-role="main" class="ui-content" style="font-size: 12px;">
        <ul data-role="listview" data-inset="true">
            <ul data-role="listview" data-inset="true">
                <li>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <span style="font-size: 16px;margin-right:20px;">选择日期</span>
                            <label for="year">年份：</label>
                            <input name="year" id="year" type="date" v-model="getYear" data-role="none" style="border:1px solid #eee;border-radius:5px">
                        </fieldset>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <span style="font-size: 16px;margin-right:20px;">结束日期</span>
                            <label for="year">年份：</label>
                            <input name="year" id="lastyear" type="date" v-model="lastYear" data-role="none" style="border:1px solid #eee;border-radius:5px">
                        </fieldset>
                    </div>
                </li>
            <li><a href="#pageProv">省市<span class="ui-li-count" style="z-index:100;" v-show="getProviceId.length>0">{{getProviceStr}}</span></a></a></li>
            <li><a href="#pagePoint" @click="getPoint()">点位</a></li>
            <li><a href="#pageSku">SKU<span class="ui-li-count" v-show="getSkuId.length>0">{{getSkuStr}}</span></a></a></li>
        </ul>
    </div>
</div>
<!--省市页面-->
<div data-role="page" id="pageProv" data-display="overlay" data-position="right">
    <div data-role="header" data-theme="a" data-position="fixed" class="header">
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
        <h2>省份</h2>
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectProv" data-rel="close" data-transition="slide" data-direction="reverse" @click="getProv()">确认</a>
    </div>
    <div data-role="main" class="ui-content">
        <ul data-role="listview" data-inset="true">
            <li>选择的城市：<span  class="ui-li-count" style="top:20%;" v-show="getCityLabel.length>0">{{getCityLabel}}</span></li>
            <li v-for="item in provCity">
                <a  href="#pageCity"  style="padding:0 40px 0 0;"  @click="showCity(item.id,item.label)">
                    <input type="checkbox" name="provCheck" id="{{item.id}}" value="{{item.id}}" @click.prevent>
                    <label for="{{item.id}}" class="ui-btn-hover-d ui-btn-up-d">{{item.label}}</label>
                </a>
            </li>
        </ul>
    </div>
</div>
<!--城市页面-->
<div data-role="page" id="pageCity" data-display="overlay" data-position="right" class="seleRight">
    <div data-role="header" data-theme="a" data-position="fixed" class="header">
        <a href="#pageProv" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
        <h2>城市</h2>
        <a href="#pageProv" target="_self" class="ui-btn ui-btn-b" id="selectHB" data-rel="close" data-transition="slide" data-direction="reverse" @click="getselCity()">确认</a>
    </div>
    <div data-role="main" class="ui-content">
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">{{proName}}</li>
            <li class="ui-li-static ui-body-inherit" v-for="city in provIdcity">
                <span>{{city.label}}</span>
                <input class="ui-btn-right" type="checkbox" id="{{city.id}}" value="{{city.id}}"  name="{{proName}}"  data-role="none" v-model="getCityId">

            </li>
        </ul>
    </div>
</div>
<!--通路页面-->
<div data-role="page" id="pageAcce" data-display="overlay" data-position="right" class="seleRight">
    <div data-role="header" data-theme="a" data-position="fixed" class="header">
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
        <h2>通路</h2>
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectAcce" data-rel="close" data-transition="slide" data-direction="reverse" @click="getSpike()">确认</a>
    </div>
    <div data-role="main" class="ui-content">
        <ul data-role="listview" data-filter="true" data-filter-placeholder="搜索通路" data-inset="true">
            <li v-for="item in spike">
                <div data-role="collapsible" v-if="item.twoRoute">
                    <h6>{{item.label}}<input @click.stop class="ui-btn-right" type="checkbox" name="accCheck" value="{{item.id}}" data-role="none" v-model="getSpikeId"></h6>
                    <p id="pap">
                    <ul data-role="none">
                        <li style="list-style: none;padding-left: 20px;" v-for="li in item.twoRoute">
                            <label style="display: inline-block;" for="{{li.id}}">{{li.label}}</label>
                            <input id="{{li.id}}" name="accTwoCheck" value="{{li.id}}" type="checkbox" style="height:12px;">
                        </li>
                    </ul>
                    </p>
                </div>
                <div v-else>
                    {{item.label}}<input class="ui-btn-right"  type="checkbox" name="accCheck" value="{{item.id}}" data-role="none" v-model="getSpikeId">
                </div>
            </li>
        </ul>
    </div>
</div>
<!--点位页面-->
<div data-role="page" id="pagePoint" data-display="overlay" data-position="right" class="seleRight">
    <div data-role="header" data-theme="a" data-position="fixed" class="header">
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
        <h2>点位</h2>
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectPoint" data-rel="close" data-transition="slide" data-direction="reverse">确认</a>
    </div>
    <div data-role="main" class="ui-content">
        <ul data-role="listview" data-filter="true" data-filter-placeholder="搜索通路" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" v-for="item in getCityPoint">
            <li data-role="list-divider" class="ui-li-divider ui-bar-inherit ui-first-child" >{{item.label}}</li>
            <li v-for="list in item.point" class="ui-li-static ui-body-inherit">
                {{list.label}}
                <input class="ui-btn-right" type="checkbox" name="pointCheck" value="{{list.id}}" data-role="none" v-model="getPointId">
            </li>
        </ul>
    </div>
</div>
<!--sku页面-->
<div data-role="page" id="pageSku" data-display="overlay" data-position="right" class="seleRight">
    <div data-role="header" data-theme="a" data-position="fixed" class="header">
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
        <h2>SKU</h2>
        <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectSKU" data-rel="close" data-transition="slide" data-direction="reverse" @click="getSku()">确认</a>
    </div>
    <div data-role="main" class="ui-content">
        <ul data-role="listview" data-filter="true" data-filter-placeholder="搜索sku" data-inset="true">
            <!--<li data-role="list-divider">A</li>-->
            <li v-for="item in skuAll">{{item.label}}
                <input class="ui-btn-right" type="checkbox" name="skuCheck" value="{{item.id}}" data-role="none" v-model="getSkuId">
            </li>
        </ul>
    </div>
</div>
<script src="../../library/vue/vue.js"></script>
<script src="../../library/vue/vue-resource.js"></script>
<script src='swiper.min.js'></script>
<script src="yearSku.js"></script>
<script>
    var mySwiper = new Swiper(".swiper-container",{
        observer:true,
        observeParents:true
    });
</script>
</body>
</html>